<template>
    <div class="order-report">
        <div
            class="report-table-top-title"
            style="height: 50px; line-height: 50px"
        >
            娱加云总店
            <span
                style="color: #000; font-size: 15px; margin-left: 20px"
            ></span>
            <span style="float: right">
                <el-button type="primary" plain size="small" @click="onSubmit"
                    >确认保存</el-button
                >
                <el-button type="danger" plain size="small" @click="toMain"
                    >返回</el-button
                >
            </span>
        </div>
        <!-- 表单主体 -->
        <div class="report-table-form1">
            <div class="report-table-form1-line">
                <div
                    class="report-table-form1-item word samll"
                    style="width: 80px"
                >
                    商家名称:
                </div>
                <div class="report-table-form1-item" style="width: 180px">
                    <el-input
                        v-model="headShopInfo.mainCompanyName"
                        :disabled="!canModify"
                        placeholder="必填"
                        size="small"
                    ></el-input>
                </div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 80px"
                >
                    联系人电话:
                </div>
                <div class="report-table-form1-item" style="width: 180px">
                    <el-input
                        v-model="headShopInfo.relationPhone"
                        placeholder="必填"
                        size="small"
                    ></el-input>
                </div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 80px"
                >
                    联系人名称:
                </div>
                <div class="report-table-form1-item" style="width: 180px">
                    <el-input
                        v-model="headShopInfo.relationName"
                        placeholder="必填"
                        size="small"
                    ></el-input>
                </div>
            </div>
            <div class="report-table-form1-line">
                <div
                    class="report-table-form1-item word samll"
                    style="width: 70px"
                >
                    商家地址:
                </div>
                <div
                    class="report-table-form1-item"
                    style="width: 180px; margin-right: 1px"
                >
                    <el-select
                        v-model="provincialLevelCode"
                        placeholder="请选择"
                        size="small"
                    >
                        <el-option
                            v-for="item in options1"
                            :key="item.regioncode"
                            :label="item.regionname"
                            :value="item.regioncode"
                        ></el-option>
                    </el-select>
                </div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 35px"
                >
                    省
                </div>
                <div
                    class="report-table-form1-item"
                    style="width: 180px; margin-right: 1px"
                >
                    <el-select
                        v-model="cityLevelCode"
                        placeholder="请选择"
                        size="small"
                    >
                        <el-option
                            v-for="item in options2"
                            :key="item.regioncode"
                            :label="item.regionname"
                            :value="item.regioncode"
                        ></el-option>
                    </el-select>
                </div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 35px"
                >
                    市
                </div>
                <div
                    class="report-table-form1-item"
                    style="width: 180px; margin-right: 1px"
                >
                    <el-select
                        v-model="countyCode"
                        placeholder="请选择"
                        size="small"
                    >
                        <el-option
                            v-for="item in options3"
                            :key="item.regioncode"
                            :label="item.regionname"
                            :value="item.regioncode"
                        ></el-option>
                    </el-select>
                </div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 35px"
                >
                    区
                </div>
            </div>
            <div class="report-table-form1-line">
                <div
                    class="report-table-form1-item word samll"
                    style="width: 70px"
                >
                    详细地址:
                </div>
                <div class="report-table-form1-item" style="width: 400px">
                    <el-input
                        v-model="headShopInfo.mainCompanyAddress"
                        placeholder="省、市、详细地址必填"
                        size="small"
                    ></el-input>
                </div>
            </div>
            <div class="report-table-form1-line">
                <div
                    class="report-table-form1-item word samll"
                    style="width: 80px"
                >
                    代理商:
                </div>
                <div class="report-table-form1-item" style="width: 180px">
                    <el-select
                        v-model="value4"
                        filterable
                        :disabled="!canModify || options4.length < 2"
                        placeholder="请选择"
                        size="small"
                    >
                        <el-option
                            v-for="(item, index) in options4"
                            :key="item.id"
                            :label="item.userName"
                            :value="index"
                        ></el-option>
                    </el-select>
                </div>
            </div>
            <div class="report-table-form1-line">
                <div
                    class="report-table-form1-item word samll"
                    style="width: 70px"
                >
                    状态:
                </div>
                <div class="report-table-form1-item" style="width: 180px">
                    <el-radio
                        v-model="headShopInfo.status"
                        :disabled="!canChangeStatus"
                        :label="0"
                        >正常</el-radio
                    >
                    <el-radio
                        v-model="headShopInfo.status"
                        :disabled="!canChangeStatus"
                        :label="1"
                        >停用</el-radio
                    >
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    data: function () {
        return {
            companyCode: '',
            companyName: '',
            headShopInfo: {
                mainCompanyId: '',
                mainCompanyName: '',
                regionCode: '',
                mainCompanyAddress: '',
                relationPhone: '',
                relationName: '',
                agentId: '',
                agentName: '',
                status: 0
            },
            provincialLevelCode: '',
            provincialLevelName: '',
            cityLevelCode: '',
            cityLevelName: '',
            countyCode: '',
            countyName: '',

            options1: [
                {
                    regionname: '省份',
                    regioncode: ''
                }
            ],

            options2: [
                {
                    regionname: '城市',
                    regioncode: ''
                }
            ],

            options3: [
                {
                    regionname: '区/县',
                    regioncode: ''
                }
            ],
            options4: [],
            value4: 0,
            canModify: true,
            canChangeStatus: false // 是否禁止修改状态
        }
    },
    mounted () {
    },
    created () {
        if (this.$store.state.headShopInfo.mainCompanyId) {
            // 1代表管理人员，2代表代理商 (不能修改)
            if (this.roleId === 1 && this.manageRoleType === 0) {
                this.canModify = true
            } else {
                this.canModify = false
            }
            this.headShopInfo = this.$store.state.headShopInfo
        } else {
            this.canModify = true
            // 新建 总店 默认停用
            this.headShopInfo.status = 1
        }
        this.canChangeStatus = this.roleId === 1 && this.manageRoleType === 0
        console.log('000000000000', this.$store.state.roleId)
        this.getProvice()
        this.getAllAgent()
    },
    computed: {
        roleId () {
            return this.$store.state.roleId
        },
        manageRoleType () {
            return this.$store.state.manageRoleType
        }
    },
    components: {
    },
    props: {
    },
    watch: {
        provincialLevelCode () {
            if (this.provincialLevelCode === '') {
                this.options2 = [
                    {
                        regionname: '城市',
                        regioncode: ''
                    }
                ]
                this.options3 = [
                    {
                        regionname: '区/县',
                        regioncode: ''
                    }
                ]
                this.cityLevelCode = ''
                this.countyCode = ''
                return
            }
            this.options1.forEach(item => {
                if (this.provincialLevelCode === item.regioncode) {
                    this.provincialLevelName = item.regionname
                }
            })
            this.getCity()
        },
        cityLevelCode () {
            if (this.cityLevelCode === '') {
                this.options3 = [
                    {
                        regionname: '区/县',
                        regioncode: ''
                    }
                ]
                this.countyCode = ''
                return
            }
            this.options2.forEach(item => {
                if (this.cityLevelCode === item.regioncode) {
                    this.cityLevelName = item.regionname
                }
            })
            this.getCounty()
        },
        countyCode () {
            this.options3.forEach(item => {
                if (this.countyCode === item.regioncode) {
                    this.countyName = item.regionname
                }
            })
        }
    },
    methods: {
        onSubmit () {
            console.log('this.options4[this.value4]')
            console.log(this.options4[this.value4])
            // 提交 新建 / 修改
            if (this.headShopInfo.mainCompanyName === '') {
                this.showMessage('请输入总店名称')
                return
            }
            if (!(/^\d{11}$/.test(this.headShopInfo.relationPhone))) {
                this.showMessage('请输入正确联系电话')
                return
            }
            if (this.headShopInfo.relationName === '') {
                this.showMessage('请输入联系人名称')
                return
            }
            if (this.cityLevelCode === '') {
                this.showMessage('请选择城市')
                return
            }
            if (this.provincialLevelCode === '') {
                this.showMessage('请选择省份')
                return
            }
            if (this.headShopInfo.mainCompanyAddress === '') {
                this.showMessage('请输入详细地址')
                return
            }
            // if (this.headShopInfo.agentName === '') {
            //     this.showMessage('请输入代理商名称')
            //     return
            // }
            if (this.headShopInfo.status === '') {
                this.showMessage('请选择总店状态')
                return
            }
            console.log(this.provincialLevelCode, 'provincialLevelCode')
            console.log(this.cityLevelCode, 'cityLevelCode')
            console.log(this.countyCode, 'countyCode')
            this.$http.post(this.$store.state.IP + '/system/yjyunmaincompany/saveOrEdit', {
                data: {
                    mainCompanyId: this.headShopInfo.mainCompanyId,
                    mainCompanyName: this.headShopInfo.mainCompanyName,
                    regionCode: this.countyCode || this.cityLevelCode || this.provincialLevelCode,
                    mainCompanyAddress: this.headShopInfo.mainCompanyAddress,
                    relationPhone: this.headShopInfo.relationPhone,
                    relationName: this.headShopInfo.relationName,
                    agentId: this.options4[this.value4].id,
                    agentName: this.options4[this.value4].userName,
                    status: this.headShopInfo.status
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    if (!this.headShopInfo.mainCompanyId) {
                        this.showMessage('新建总店成功')
                    } else {
                        this.showMessage('编辑总店信息成功')
                    }
                    this.toMain()
                }
                if (response.ret !== '0') {
                    let msg = response.msg
                    if (!this.mainCompanyId) {
                        this.showMessage(msg || '新建总店失败')
                    } else {
                        this.showMessage(msg || '编辑总店信息失败')
                    }
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },

        showMessage (message) {
            // 提示信息
            this.$message({
                showClose: true,
                message: message,
                type: 'warning'
            })
        },

        toMain () {
            // 返回
            let returnBackUrl = this.$store.state.returnBackUrl
            if (returnBackUrl === '') {
                this.$store.dispatch('setPageHeadShop', 0)
            } else {
                // 需要 定向到 某处
            }
        },
        getAllAgent () {
            this.$http.post(this.$store.state.IP + '/system/company/getAllAgent', {
                data: {
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('调用获取所有代理商成功')
                    console.log(response.data)
                    response.data.forEach(item => {
                        if (this.roleId === 2) {
                            if (item.id === this.$store.state.agentIdFY) {
                                this.options4.push(item)
                            }
                        } else {
                            this.options4.push(item)
                        }
                    })
                    this.options4.forEach((item, index) => {
                        if (this.headShopInfo.agentId === item.id) {
                            this.value4 = index
                        }
                    })
                }
                if (response.ret !== '0') {
                    console.log('调用获取所有代理商失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },
        getProvice () {
            // 获取 省级列表
            let params = {
                params: {
                }
            }
            this.$http.get(this.$store.state.IP + '/region/provincialLevel', params).then(response => {
                console.log('-------------------------------------------')
                console.log('调用获取行政区域返回')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('调用返回行政区域成功')
                    let sourceRegionCode = ''
                    if (this.headShopInfo.regionCode) {
                        sourceRegionCode = this.headShopInfo.regionCode.slice(0, 2) + '0000'
                    }
                    response.data.forEach(item => {
                        this.options1.push(item)
                        if (sourceRegionCode !== '' && sourceRegionCode === item.regioncode) {
                            this.provincialLevelCode = item.regioncode
                        }
                    })
                }
                if (response.ret !== '0') {
                    console.log('调用返回行政区域失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
            // 调用删除人员接口
        }, // 获取省份

        getCity () {
            // 获取 市级列表
            this.$http.post(this.$store.state.IP + '/region/cityLevel', {
                data: {
                    preCode: this.provincialLevelCode
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('调用获取城市列表成功')
                    console.log(response.data)
                    this.options2 = [
                        {
                            regionname: '城市',
                            regioncode: ''
                        }
                    ]
                    let sourceRegionCode = ''
                    if (this.headShopInfo.regionCode) {
                        sourceRegionCode = this.headShopInfo.regionCode.slice(0, 4) + '00'
                    }
                    response.data.forEach(item => {
                        this.options2.push(item)
                        if (sourceRegionCode !== '' && sourceRegionCode === item.regioncode) {
                            this.cityLevelCode = item.regioncode
                        }
                    })
                }
                if (response.ret !== '0') {
                    console.log('调用获取城市列表失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },

        getCounty () {
            // 获取 县、区级列表
            this.$http.post(this.$store.state.IP + '/region/countyLevel', {
                data: {
                    preCode: this.cityLevelCode
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('调用获取区/县列表成功')
                    console.log(response.data)
                    this.options3 = [
                        {
                            regionname: '区/县',
                            regioncode: ''
                        }
                    ]
                    let sourceRegionCode = ''
                    if (this.headShopInfo.regionCode) {
                        sourceRegionCode = this.headShopInfo.regionCode
                    }
                    response.data.forEach(item => {
                        this.options3.push(item)
                        if (sourceRegionCode !== '' && sourceRegionCode === item.regioncode) {
                            this.countyCode = item.regioncode
                        }
                    })
                }
                if (response.ret !== '0') {
                    console.log('调用获取区/县列表失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.tipPic
    width: 925px
    height: 300px
    background: url('../../../../common/pic/addShopPic.png')
    background-repeat: no-repeat
    background-size: cover

.el-transfer-panel
    width: 400px

.order-report-agent
    width: 100%
    background: #f1f0f5

    .el-transfer__button:first-child
        display: none

    .report-table-top-title
        width: 100%
        height: 64px
        line-height: 64px
        color: #000
        font-size: 18px

    .report-table-form1
        width: 100%
        min-height: 40px
        padding: 16px 0 0 22px
        box-sizing: border-box
        background: #fff
        overflow: hidden

        .report-table-form1-line
            min-height: 32px
            margin-bottom: 16px

            .report-table-form1-item
                display: inline-block
                vertical-align: top
                height: 32px
                margin-right: 15px
                line-height: 32px

                &.word
                    margin-right: 0

                &.samll
                    font-size: 15px
                    text-align: left

                &.big
                    margin-right: 100px

    .report-table-block
        width: 100%
        padding-top: 22px
        height: 50px
        background: #fff
        box-sizing: border-box

        .report-table-block-in
            float: right
            padding-right: 17px

    .page-padding-gray-small
        width: 100%
        height: 22px
        background: #f1f0f5

    .page-padding
        width: 100%
        height: 20px
        background: #fff

    .report-table-total
        width: 100%
        font-size: 16px
        color: #409EFF
        padding: 22px
        margin-top: 22px
        box-sizing: border-box
        background: #fff
</style>
